<template>
	<view class="container">
		<view v-for="(item, index) in multiplePageList[pageIndex]" :key="index">
			<view class="group-title">{{item.title}}</view>
			<view v-for="(sub, subIndex) in item.items" :key="subIndex" class="sub-view">
				<view class="sub-title">{{subIndex + 1}}.{{sub.title}}</view>
				<template v-if="checkResult === null">
					<u-radio-group v-model="sub.index" class="sub-options" width="50%">
						<u-radio
							style="margin-bottom: 10rpx;"
							v-for="(option, optionIndex) in sub.selects" :key="optionIndex"
							:disabled="checkResult!==null"
							:active-color="appTheme.checkColor"
							:name="optionIndex + 1">
							{{option}}
						</u-radio>
					</u-radio-group>
				</template>
				<template v-else>
					<u-radio-group v-model="checkResult[pageIndex][index][subIndex].index" class="sub-options" width="50%">
						<u-radio
							style="margin-bottom: 10rpx;"
							v-for="(option, optionIndex) in sub.selects" :key="optionIndex"
							:disabled="checkResult!==null"
							:active-color="appTheme.checkColor"
							:name="optionIndex + 1">
							{{option}}
						</u-radio>
					</u-radio-group>
				</template>

			</view>
		</view>
		<view class="action">
			<u-button v-if="pageIndex === multiplePageList.length - 1" @click="nextClick">
				{{checkResult?'返回':'确认'}}
			</u-button>
			<u-button v-else @click="nextClick">下一页</u-button>
		</view>
	</view>
</template>

<script>
	import { multiple } from './config.js'
	import { addCheckReport, getCheckReportInfo } from '@/api/check.js'
	import appMixin from '@/mixins/app.js'
	export default {
		mixins: [appMixin],
		data() {
			return {
				show: false,
				pageIndex: 0,
				multiplePageList: [],
				checkResult: null,
			}
		},
		onLoad(options) {
			this.childId = options.childId
			this.multiplePageList = this.$u.deepClone(multiple);
			this.getChildrenCheckReport();
		},
		methods: {
			nextClick() {
				if (this.checkResult === null) {
					const pageList = this.multiplePageList[this.pageIndex];
					for (let index in pageList) {
						const item = pageList[index];
						for (let subIndex in item.items) {
							const sub = item.items[subIndex]
							if (sub.index === -1) {
								console.log(sub.title);
								this.$u.toast('请完成所有选项')
								return;
							}
						}
					}
				}
				if (this.pageIndex + 1 === this.multiplePageList.length) {
					this.commit();
					return;
				}

				this.pageIndex += 1;
			},
			
			commit() {
				if (this.checkResult !== null) {
					uni.navigateBack({});
					return;
				}
				
				let optList3 = [];
				for (let i in this.multiplePageList) {
					let optList2 = [];
					const itemList = this.multiplePageList[i];
					for (let j in itemList) {
						let optList1 = [];
						const sub =itemList[j];
						for (let k in sub.items) {
							const item = sub.items[k];
							let result = {
								index: item.index,
								text: item.text,
								flagIndex: item.selects.length - 1
							};
							optList1.push(result);
						}
						optList2.push(optList1);
					}
					optList3.push(optList2);
				}
				console.log(optList3);
				const checkResult = JSON.stringify(optList3);
				const params = {
					'childId': this.childId,
					'checkResult':checkResult
				}
				console.log(params);
				addCheckReport(params).then(res => {
					uni.navigateBack({});
				})
			},
			
			getChildrenCheckReport() {
				uni.showLoading({})
				getCheckReportInfo(this.childId).then(res => {
					console.log(res);
					uni.hideLoading();
					if (!this.$u.test.isEmpty(res.data)) {
						this.checkResult = JSON.parse(res.data.checkResult);
					}
					this.show = true
				}).catch(err => {
					uni.hideLoading();
					this.show = true
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		display: flex;
		flex-direction: column;
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
	}
	
	.group-title{
		margin-top: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	
	.sub-view{
		margin-top: 20rpx;
		.sub-title{
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #333333;
		}
		
		.sub-options{
			margin-top: 20rpx;
			width: 100%;
		}
	}
	
	.action{
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}
	
</style>
